<template>
  <div class="mb-20 bg-white">
    <NavBar />
    <div class="flex justify-center">
      <div class="pb-20" style="margin-top:79px;">
        <div class="container-width">
          <div class="flex flex-row  w-full">
            <MineLeftNav />
            <div class="flex-1 flex flex-col w-full">
              <div class="flex flex-col bg-[#F9F9F9]  w-full h-36">
                <div class="h-11 flex items-center border-b border-[#E0E0E0] pl-5 text-sm">我的项目</div>
                <div class="h-24 pl-5 pt-8">
                  <input v-model="projectListQuery.projectname" type="text" class="w-72 py-2 px-2.5 h-8 sm:text-sm border border-slate-300" placeholder="搜索我的项目" />
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleFilter" style="cursor: pointer;">搜索</button>
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleCreate" style="cursor: pointer;">发布项目</button>
                </div>
              </div>
              <div class="flex flex-col bg-[#F2F2F2] w-full mt-6">
                <table class="border border-[#E6E6E6] text-sm">
                  <thead>
                    <tr>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">项目编号</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">项目名称</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">所在地区</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">认领人</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in projects" :key="index" class="bg-[#FFFFFF]">
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.id }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.projectname }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.provincename }}{{ item.cityname }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]"></td>
                      <td class="w-36 flex border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">
                        <button class="px-3 py-2 bg-[#2284C4] text-[12px] text-white" @click="handleUpdate(item)" style="cursor: pointer;">修改</button>
                        <button class="px-3 py-2 ml-3 bg-[#FE7743] text-[12px] text-white" @click="handleDelete(item)" style="cursor: pointer;">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
          <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="margin-left:50px;">
            <el-form-item label="项目名称" prop="projectname">
              <el-input v-model="temp.projectname" />
            </el-form-item>
            <el-form-item label="项目介绍" prop="details">
              <el-input v-model="temp.details" type="textarea" :rows="2" />
            </el-form-item>
            <el-divider content-position="left">项目参数</el-divider>
            <el-form-item label="就业人数" prop="jiuyerenshu">
              <el-input v-model="temp.jiuyerenshu" />
            </el-form-item>
            <el-form-item label="项目类型" prop="xiangmuleixing">
              <el-select v-model="temp.xiangmuleixing" placeholder="请选择">
                <el-option
                  v-for="item in XiangMuLeiXingOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="对象级别" prop="duixiangjibie">
              <el-select v-model="temp.duixiangjibie" placeholder="请选择">
                <el-option
                  v-for="item in DuiXiangJiBieOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册资本" prop="zhuceziben">
              <el-input v-model="temp.zhuceziben" />
            </el-form-item>
            <el-form-item label="意向地区" prop="province">
              <el-select v-model="temp.province" placeholder="请选择" @change="getCityList">
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item.name"
                  :value="item.provincecode">
                </el-option>
              </el-select>
              <el-select v-model="temp.city" placeholder="请选择">
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item.name"
                  :value="item.provincecode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="落地时间" prop="luodishijian">
              <el-input v-model="temp.luodishijian" />
            </el-form-item>
            <el-form-item label="投资预计" prop="touziyuji">
              <el-input v-model="temp.touziyuji" />
            </el-form-item>
            <el-form-item label="产值预计" prop="chanzhiyuji">
              <el-input v-model="temp.chanzhiyuji" />
            </el-form-item>
            <el-form-item label="税收预计" prop="shuishouyuji">
              <el-input v-model="temp.shuishouyuji" />
            </el-form-item>
            <el-divider content-position="left">项目需求</el-divider>
            <el-form-item label="载体需求" prop="zaitixuqiu">
              <el-input v-model="temp.zaitixuqiu" />
            </el-form-item>
            <el-form-item label="项目意向" prop="xiangmuyixiang">
              <el-input v-model="temp.xiangmuyixiang" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleDialogClose" style="cursor: pointer;">
              取消
            </el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" style="cursor: pointer;">
              保存
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue"
import MineLeftNav from '@/components/MineLeftNav'
import { fetchMyProjects } from '@/api/user'
import { createProject, deleteProject, fetchProject, updateProject } from '@/api/project'
import { fetchDictList } from '@/api/dict'
import { fetchProvinceList, fetchCityList } from '@/api/province'

export default {
  components: {
    MineLeftNav,
    NavBar
  },
  data() {
    return {
      projects: [],
      projectListQuery: {
        projectname: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      temp: {
        id: undefined,
        biaoqian: undefined,
        chanzhiyuji: undefined,
        details: undefined,
        duijiejibie: undefined,
        duixiangjibie: undefined,
        hangyeleixing: undefined,
        jiuyerenshu: undefined,
        luodishijian: undefined,
        projectname: undefined,
        province: undefined,
        remark: undefined,
        shangji: undefined,
        touziyuji: undefined,
        xiangmuleixing: undefined,
        xiangmuyixiang: undefined,
        zaitixuqiu: undefined,
        zhuceziben: undefined,
        yixiangdiqu: undefined,
        shuishouyuji: undefined,
        city: undefined
      },
      rules: {
        biaoqian: [{ required: true, message: '不能为空', trigger: 'blur' }],
        chanzhiyuji: [{ required: true, message: '产值预计不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '不能为空', trigger: 'blur' }],
        details: [{ required: true, message: '不能为空', trigger: 'blur' }],
        duijiejibie: [{ required: true, message: '不能为空', trigger: 'blur' }],
        duixiangjibie: [{ required: true, message: '不能为空', trigger: 'blur' }],
        hangyeleixing: [{ required: true, message: '不能为空', trigger: 'blur' }],
        jiuyerenshu: [{ required: true, message: '不能为空', trigger: 'blur' }],
        luodishijian: [{ required: true, message: '不能为空', trigger: 'blur' }],
        projectname: [{ required: true, message: '不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '不能为空', trigger: 'blur' }],
        shangji: [{ required: true, message: '不能为空', trigger: 'blur' }],
        touziyuji: [{ required: true, message: '不能为空', trigger: 'blur' }],
        xiangmuleixing: [{ required: true, message: '不能为空', trigger: 'blur' }],
        xiangmuyixiang: [{ required: true, message: '不能为空', trigger: 'blur' }],
        zaitixuqiu: [{ required: true, message: '不能为空', trigger: 'blur' }],
        zhuceziben: [{ required: true, message: '不能为空', trigger: 'blur' }],
        shuishouyuji: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      provinceList: [],
      cityList: [],
      DuiXiangJiBieOptions: [],
      XiangMuLeiXingOptions: []
    }
  },
  created() {
    this.getList()
    fetchDictList({dictType: 'sys_duixiangjibie'}).then(response => {
      this.DuiXiangJiBieOptions = response.data
    })
    fetchDictList({dictType: 'sys_xiangmuleixing'}).then(response => {
      this.XiangMuLeiXingOptions = response.data
    })
    fetchProvinceList().then(response => {
      this.provinceList = response.data
    })
  },
  methods: {
    getList() {
      fetchMyProjects(this.projectListQuery).then(res => {
        this.projects = res.data
      })
    },
    getCityList() {
      fetchCityList({ provincecode: this.temp.province }).then(res => {
        this.cityList = res.data
      })
    },
    handleFilter() {
      this.getList()
    },
    handleDialogClose(done) {
      this.$confirm('确认关闭？').then(() => {
        this.resetTemp()
        this.dialogFormVisible = false
        done()
      }).catch(() => {})
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        biaoqian: undefined,
        chanzhiyuji: undefined,
        details: undefined,
        duijiejibie: undefined,
        duixiangjibie: undefined,
        hangyeleixing: undefined,
        jiuyerenshu: undefined,
        luodishijian: undefined,
        projectname: undefined,
        province: undefined,
        remark: undefined,
        shangji: undefined,
        touziyuji: undefined,
        xiangmuleixing: undefined,
        xiangmuyixiang: undefined,
        zaitixuqiu: undefined,
        zhuceziben: undefined,
        yixiangdiqu: undefined,
        shuishouyuji: undefined,
        city: undefined
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createProject(this.temp).then((res) => {
            if (res.result === 1) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.resetTemp()
      fetchProject(row.id).then(res => {
        if (res.result === 1) {
          this.temp = res.data
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateProject(tempData).then((res) => {
            if (res.result === 1) {
              this.getList()
              // this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.message,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleDelete(row, index) {
      deleteProject({ id: row.id }).then(res => {
        if (res.result === 1) {
          this.getList()
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>